<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小U商城 - 购物车</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/shopping_cart.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="font_2/iconfont.css">
    <link rel="shortcut icon" href="images/xiaou_logo.png" type="image/x-icon">
</head>
<body>
    <!-- 顶部 -->
    <div id="header_box">
        <div class="type_area header">
            <!-- 顶部左边 -->
            <ul class="left">
                <li>
                    <a href="#">网站导航</a>
                    <span class="iconfont">&#xe520;</span>
                </li>
                <li>
                    <a href="#">商家入驻</a>
                    <span class="iconfont">&#xe520;</span>
                </li>
                <li>
                    <a href="#">客户服务</a>
                    <span class="iconfont">&#xe520;</span>
                </li>
                <li>
                    <i class="iconfont">&#xed14;</i>
                    <a href="#">北京</a>
                    <em class="iconfont">&#xe502;</em>
                </li>
            </ul>
            <!-- 顶部右边 -->
            <ul class="right">
                <li>
                    <a href="#">请登录</a>
                </li>
                <li>
                    <a href="#">注册有礼</a>
                </li>
                <li>
                    <a href="#">我的订单</a>
                    <span class="iconfont">&#xe520;</span>
                </li>
                <li>
                    <a href="#">我的易购</a>
                    <span class="iconfont">&#xe520;</span>
                </li>
                <li>
                    <a href="#">小U会员</a>
                </li>
                <li>
                    <i class="iconfont">&#xf0179;</i>
                    <a href="#">购物车 0</a>
                    <em class="iconfont">&#xe520;</em>
                </li>
                <li>
                    <a href="#">易付宝</a>
                </li>
                <li>
                    <a href="#">企业采购</a>
                </li>
                <li>
                    <a href="#">手机小U</a>
                    <span class="iconfont">&#xe520;</span>
                </li>
            </ul>
        </div>
    </div>

    <!-- 头部 -->
    <div id="top">
        <div class="type_area">
            <!-- 头部左边 -->
            <h2>
                <img src="images/logo.jpg" alt="">
                <i>购物车</i>
            </h2>

            <!-- 头部搜索栏 -->
            <div class="search_box">
                <form action="">
                    <input type="text" class="keyword iconfont" placeholder="&#xe501; 空气净化器">
                    <input type="submit" value="搜索" class="btn">
                </form>
            </div>
        </div>   
    </div>

    <!-- 购物车内容区 -->
    <div id="shopping_cart">
        <div class="type_area">
            <!-- 内容头部 -->
            <form action="" class="form_top">
                <input type="checkbox">
                <p class="p1">全选</p>
                <p>商品</p>
                <p class="p2">单价</p>
                <p>购买数量</p>
                <p class="p3">小计</p>
                <p>操作</p>
            </form>
            <!-- 内容商品 -->
            <form action="" class="shopping">
                <!-- 复选框 -->
                <input type="checkbox">
                <!-- 商品图片 -->
                <img src="images/phone.png" alt="">
                <!-- 商品名称 -->
                <div class="shop_name">
                    <p>Apple iPhone 5 Plus(A1524)64GB 深空灰色 移动联通电信4g手机</p>
                    <i>颜色：红</i>
                    <i>型号：V1</i>
                </div>
                <!-- 单价 -->
                <p>￥ 5199.00</p>
                <!-- 购买数量 -->
                <div class="goods_no">
                    <p class="iconfont">&#xe613;</p>
                    <p>1</p>
                    <p class="iconfont">&#xe6c3;</p>
                </div>
                <!-- 小计 -->
                <span>5199.00</span>
                <!-- 操作 -->
                <div class="operation">
                    <p>删除</p>
                    <p>移入收藏夹</p>
                </div>
            </form>
            <!-- 内容商品 -->
            <form action="" class="shopping">
                <!-- 复选框 -->
                <input type="checkbox">
                <!-- 商品图片 -->
                <img src="images/phone.png" alt="">
                <!-- 商品名称 -->
                <div class="shop_name">
                    <p>Apple iPhone 5 Plus(A1524)64GB 深空灰色 移动联通电信4g手机</p>
                    <i>颜色：红</i>
                    <i>型号：V1</i>
                </div>
                <!-- 单价 -->
                <p>￥ 5199.00</p>
                <!-- 购买数量 -->
                <div class="goods_no">
                    <p class="iconfont">&#xe613;</p>
                    <p>1</p>
                    <p class="iconfont">&#xe6c3;</p>
                </div>
                <!-- 小计 -->
                <span>5199.00</span>
                <!-- 操作 -->
                <div class="operation">
                    <p>删除</p>
                    <p>移入收藏夹</p>
                </div>
            </form>
            <!-- 内容商品 -->
            <form action="" class="shopping">
                <!-- 复选框 -->
                <input type="checkbox">
                <!-- 商品图片 -->
                <img src="images/phone.png" alt="">
                <!-- 商品名称 -->
                <div class="shop_name">
                    <p>Apple iPhone 5 Plus(A1524)64GB 深空灰色 移动联通电信4g手机</p>
                    <i>颜色：红</i>
                    <i>型号：V1</i>
                </div>
                <!-- 单价 -->
                <p>￥ 5199.00</p>
                <!-- 购买数量 -->
                <div class="goods_no">
                    <p class="iconfont">&#xe613;</p>
                    <p>1</p>
                    <p class="iconfont">&#xe6c3;</p>
                </div>
                <!-- 小计 -->
                <span>5199.00</span>
                <!-- 操作 -->
                <div class="operation">
                    <p>删除</p>
                    <p>移入收藏夹</p>
                </div>
            </form>
            <!-- 内容商品 -->
            <form action="" class="shopping last_shopping">
                <!-- 复选框 -->
                <input type="checkbox" checked>
                <!-- 商品图片 -->
                <img src="images/phone.png" alt="">
                <!-- 商品名称 -->
                <div class="shop_name">
                    <p>Apple iPhone 5 Plus(A1524)64GB 深空灰色 移动联通电信4g手机</p>
                    <i>颜色：红</i>
                    <i>型号：V1</i>
                </div>
                <!-- 单价 -->
                <p>￥ 5199.00</p>
                <!-- 购买数量 -->
                <div class="goods_no">
                    <p class="iconfont">&#xe613;</p>
                    <p>1</p>
                    <p class="iconfont">&#xe6c3;</p>
                </div>
                <!-- 小计 -->
                <span>5199.00</span>
                <!-- 操作 -->
                <div class="operation">
                    <p>删除</p>
                    <p>移入收藏夹</p>
                </div>
            </form>
        </div>

    </div>

    <!-- 购物车底部 -->
    <div id="shopping_bottom">
        <div class="type_area">
            <form action="">
                <input type="checkbox">
                <em>全选</em>

                <span>删除选中的商品</span>

                <i>已选择<em>1</em>件商品</i>
                <div class="total_price">
                    <p>总价：￥5199.00</p>
                    <p>优惠：￥0.00</p>
                    <p>
                        合计：
                        <span>￥5199.00</span>
                    </p>
                </div>
            </form>
        </div>
    </div>
    <div class="type_area" id="btn">
        <form action="">
            <input type="button" value="继续购物" class="goon_shopping">
            <input type="button" value="提交订单" class="submit_order">
        </form>
    </div>
    
    <!-- 页面底部 -->
    <div id="footer">
        <div class="type_area">
        <ul>
            <li class="top_li">
                <a href="#">购物指南</a>
            </li>
            <li>
                <a href="#">购物流程</a>
            </li>
            <li>
                <a href="#">支付方式</a>
            </li>
            <li>
                <a href="#">配送方式</a>
            </li>
        </ul>
        <ul>
            <li class="top_li">
                <a href="#">售后服务</a>
            </li>
            <li>
                <a href="#">售后政策</a>
            </li>
            <li>
                <a href="#">价格保护</a>
            </li>
            <li>
                <a href="#">退款说明</a>
            </li>
            <li>
                <a href="#">返修/退换货</a>
            </li>
            <li>
                <a href="#">取消订阅</a>
            </li>
        </ul>
        <ul>
            <li class="top_li">
                <a href="#">配送方式</a>
            </li>
            <li>
                <a href="#">上门自提</a>
            </li>
            <li>
                <a href="#">22限时达</a>
            </li>
            <li>
                <a href="#">配送服务查询</a>
            </li>
            <li>
                <a href="#">配送费收取标准</a>
            </li>
            <li>
                <a href="#">海外配送</a>
            </li>
        </ul>
        <ul>
            <li class="top_li">
                <a href="#">支付方式</a>
            </li>
            <li>
                <a href="#">网上支付</a>
            </li>
            <li>
                <a href="#">支付宝支付</a>
            </li>
            <li>
                <a href="#">邮局汇款</a>
            </li>
        </ul>
        <ul>
            <li class="top_li">
                <a href="#">用户帮助</a>
            </li>
            <li>
                <a href="#">免费注册</a>
            </li>
            <li>
                <a href="#">找回密码</a>
            </li>
            <li>
                <a href="#">常见问题</a>
            </li>
            <li>
                <a href="#">优惠劵使用</a>
            </li>
        </ul>
        </div>
    </div>

    <!-- 经营许可 -->
    <div id="copyright">
        <p>Copyright &copy; 2010-2016 小U商城 版权所有 保留一切权利</p>
        <p>经ICP备10218183号 经ICP证161188号 京公安备案 11010802020593号 出版物经营许可证新出发京批字第直130052号</p>
    </div>
    
    
</body>
</html>